<template>
    <div>
        <top></top>
        <div class="head-img">
            <h1>注册HR，提交审核</h1>
        </div>
        <div class="wrap-center">
            <!-- 公司输入框 -->
            <div class="firm-input-box">
                <div v-if="num==1">
                    <div class="title">头像</div>
                    <div class="tit-img">
                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>

                    <div class="input-bpx">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="职位" prop="post">
                                <el-input v-model="ruleForm.post" placeholder="请输入职位"></el-input>
                            </el-form-item>
                            <el-form-item prop="email" label="企业邮箱">
                                <el-input v-model="ruleForm.email" placeholder="请填写常用邮箱,支持在招聘设置里修改"></el-input>
                            </el-form-item>
                            <el-form-item label="公司名称" prop="region">
                                <el-select v-model="ruleForm.region" placeholder="请选公司名称">
                                    <el-option label="字节跳动" value="字节跳动"></el-option>
                                    <el-option label="华为" value="华为"></el-option>
                                    <el-option label="苹果" value="苹果"></el-option>
                                    <el-option label="小米" value="小米"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 上传身份证 -->
                            <div class="wrap-shen-box">
                                <p class="papers-title">上传身份证
                                    <span>(正反面)</span>
                                </p>
                                <div class="shenfen-box">
                                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </div>
                                <p class="papers-title">上传在职证明
                                    <span>(公司营业执照,在职证明有公章)</span>
                                </p>
                                <div class="shenfen-box">
                                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible2">
                                        <img width="100%" :src="dialogImageUrl2" alt="">
                                    </el-dialog>
                                </div>
                            </div>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">提交审核</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <!-- 右侧显示 -->
            <div class="firm-img-box">
                <div class="firm-text">
                    <div class="img-box"><img :src="img"></div>
                    <p class="laname">
                        <span class="names">姓名:</span>
                        <span class="la">{{ruleForm.name}}</span>
                    </p>
                    <p class="laname">
                        <span class="names">职位:</span>
                        <span class="la">{{ruleForm.post}}</span>
                    </p>

                    <div class="wire-box">
                        <p class="laname">
                            <span class="names">企业邮箱:</span>
                            <span class="la">{{ruleForm.email}}</span>
                        </p>
                        <p class="laname">
                            <span class="names">公司名称:</span>
                            <span class="la">{{ruleForm.region}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <bottom></bottom>
    </div>
</template>
<script>
import top from "./top";
import bottom from "./bottom";

export default {
  components: { top, bottom },
  data() {
    return {
      active: 0,
      imageUrl: "",
      imageUrl2: "",
      dialogImageUrl: "",
      dialogImageUrl2: "",
      dialogVisible: false,
      dialogVisible2: false,
      num: 1,
      img: "../../static/img/banner1.jpg",
      ruleForm: {
        name: "",
        post: "",
        email: "",
        firmname: "",
        region: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        post: [
          { required: true, message: "请输入职位", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        region: [
          { required: true, message: "请选择公司名称", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 上传身份证正反面
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传在职证明
    handleRemove2(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
/* 身份证 */
.wrap-shen-box {
  width: 100%;
  /* border: 1px solid red; */
}
.papers-title {
  font-size: 14px;
  color: #606266;
}
.papers-title span {
  color: red;
  font-size: 12px;
}
.shenfen-box {
  margin: 20px 0px;
  margin-left: 100px;
}
p {
  margin: 0px;
  padding: 0px;
}
.head-img {
  width: 100%;
  height: 200px;
  background-image: url("../../static/img/bg1.jpg");
  background-size: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  color: #fff;
}
.wrap-center {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  overflow: hidden;
}
.step-box {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 60px;
}
.firm-input-box {
  width: 70%;
  float: left;
  /* border: 1px solid red; */
}
.firm-img-box {
  width: 29.5%;
  float: left;
  /* border: 1px solid blue; */
}
/* 图片上传 */
.tit-img .el-icon-plus::before {
  content: "\e650";
  font-family: iconfont;
}
.tit-img .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.wrap-phone-box .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid #ccc;
}
.tit-img,
.title {
  float: left;
}
.tit-img {
  margin-bottom: 20px;
}
.title {
  margin: 30px 15px 0px 0px;
  font-size: 14px;
  color: #606266;
  width: 85px;
  text-align: right;
}
.input-bpx {
  clear: both;
  max-width: 600px;
}
/* 右侧头像 */
.img-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0 auto;
}
.img-box img {
  width: 100%;
  height: 100%;
}
.firm-text {
  padding: 10px 25px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #ccc;
  min-height: 260px;
  width: 100%;
  overflow: hidden;
}
.wire-box {
  width: 100%;
  border-top: 1px solid #ccc;
  overflow: hidden;
  padding: 20px 0px;
  box-sizing: border-box;
  margin-top: 10px;
}
.la {
  font-size: 15px;
  color: #8c939d;
  display: block;
  border: 1px solid #fff;
  float: left;
  width: 55%;
  min-height: 20px;
  text-align: left;
}
.names {
  font-weight: 600;
  display: block;
  /* border: 1px solid red; */
  float: left;
  width: 44.3%;
  min-height: 20px;
  text-align: right;
}
.laname {
  overflow: hidden;
  margin: 15px 0px;
}
.la {
  font-size: 15px;
  color: #8c939d;
  display: block;
  border: 1px solid #fff;
  float: left;
  width: 55%;
  min-height: 20px;
  text-align: left;
}

.wrap-ruleForm2 {
  /* border: 1px solid red; */
  max-width: 650px;
}
.wrap-ruleForm2 .el-col-2 {
  text-align: center;
}
</style>
<<<<<<< HEAD

=======
>>>>>>> bc025a565c53fee8f28e5307d883cf03c61f9b3d
